<template>
    <view class="pageIndex">
        <swiper class="banner" circular>
            <swiper-item>
                <image src="@/static/temp/banner3.png" mode="aspectFit"></image>
            </swiper-item>
        </swiper>
        <view class="searchbox align-center " :class="topstyle == 2?'flexsearchbox':''">
            <uni-icons type="left" size="24"></uni-icons>
            <view class="search align-center">
                <uni-icons type="search" size="21" color="#ABB0C1"></uni-icons>
                <input type="text" placeholder="请输入商家名称">
            </view>
        </view>
        <view class="bibala">
            <swiper class="banner4" :circular="true" :autoplay="true">
                <swiper-item>
                    <image src="@/static/temp/banner4.png" mode="aspectFit"></image>
                </swiper-item>
            </swiper>
            <view class="newb">新款推荐</view>
        </view>
        <Shops :styletype="2"></Shops>
        
        <xui-xtotop ref="xtotop_ref" bgColor="#fff" borColor="#ddd" color="#222"></xui-xtotop>
        <view style="height: 100rpx;"></view>
    </view>

</template>

<script>
    import Shops from '../common/shops/index.vue'
    export default{
        components:{
            Shops
        },  
        data() {
          return {
            topstyle:1
          };
        },
        onPageScroll(e) {
            console.log(e)
            if(e.scrollTop>=200){
                this.topstyle = 2
            }else{
                this.topstyle = 1
            }
        	this.$refs.xtotop_ref.scroll(e);
        },
        methods: {}
    }
</script>

<style lang="scss">
@import '../common/common.scss';
.pageIndex{
    width: 100%;
    height: 100%;
    .banner{
        width: 750rpx;
        height: 530rpx;
        image{
            width: 100%;
            height: 100%;
        }
    }
    .searchbox{
        position: fixed;
        top: calc(var(--status-bar-height) + 24rpx);
        left: 0;
        height: 100rpx;
        width: 750rpx;
        z-index: 99;
        .search{
            width: 664rpx;
            height: 67rpx;
            background: rgba(#BEBEBE,0.86);
            border-radius: 33rpx;
            padding: 0 18rpx;
            input{
                font-size: 22.78rpx;
            }
        }
    }
    .flexsearchbox{
       background-color: #fff;
    }
    .bibala{
        width: 750rpx;
        height: 343rpx;
        background: #FFFFFF;
        border-radius: 17rpx 17rpx 0rpx 0rpx;
        margin-top: -30rpx;
        position: relative;
        z-index: 10;
        padding-top: 30rpx;
        .banner4{
            width: 676rpx;
            height: 198rpx;
            margin: 0 auto;
            image{
                width: 100%;
                height: 100%;
            }
        }
        .newb{
            margin-top: 40rpx;
            font-weight: 800;
            font-size: 33rpx;
            text-align: center;
        }
    }
}
</style>